feat(browser): Add View Hierarchy integration by timfish · Pull Request #14981 · getsentry/sentry-javascript

timfish · 2025-01-11T18:57:45Z

By default it captures the entire DOM, but it is configurable:

Capture only React components (uses attributes added by Sentry bundler plugins):

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: '__DSN__',
  integrations: [Sentry.viewHierarchyIntegration({
    onElement: ({componentName}) => componentName ? {} : 'children'
  })],
});

Capture only Web Components:

import * as Sentry from '@sentry/browser';

Sentry.init({
  dsn: '__DSN__',
  integrations: [Sentry.viewHierarchyIntegration({
    onElement: ({tagName}) => tagName.includes('-') ? {} : 'children'
  })],
});

codecov · 2025-01-11T19:28:04Z

❌ 1 Tests Failed:

Tests completed	Failed	Passed	Skipped
628	1	627	299

View the top 1 failed tests by shortest run time

client-app-routing-instrumentation.test.ts Creates a navigation transaction for app router routes

Stack Traces | 30s run time

client-app-routing-instrumentation.test.ts:19:5 Creates a navigation transaction for app router routes

To view more test analytics, go to the Test Analytics Dashboard
📢 Thoughts on this report? Let us know!

AbhiPrasad · 2025-01-14T03:21:48Z

woah

what does it look like with minified class names? (and you don't have react component annotations or similar?)

timfish · 2025-01-14T10:38:48Z

By default it's capturing getComponentName(element) || element.tagName.toLowerCase(). So the above example actually has no React components on the page, it's simply displaying HTML elements and the tag names with a hyphen (-) are Web Components.

Here is the full event:
https://sentry-sdks.sentry.io/issues/6212345017/events/c6fa1362bdf5410487cf8461d6168583/

github-actions · 2026-02-11T15:14:01Z

Codecov Results 📊

Generated by Codecov Action

github-actions · 2026-02-11T15:16:05Z

node-overhead report 🧳

Note: This is a synthetic benchmark with a minimal express app and does not necessarily reflect the real-world performance impact in an application.

Scenario	Requests/s	% of Baseline	Prev. Requests/s	Change %
GET Baseline	9,088	-	9,313	-2%
GET With Sentry	1,819	20%	1,747	+4%
GET With Sentry (error only)	6,034	66%	5,980	+1%
POST Baseline	1,186	-	1,180	+1%
POST With Sentry	595	50%	603	-1%
POST With Sentry (error only)	1,051	89%	1,054	-0%
MYSQL Baseline	3,287	-	3,272	+0%
MYSQL With Sentry	438	13%	445	-2%
MYSQL With Sentry (error only)	2,616	80%	2,698	-3%

View base workflow run

github-actions · 2026-02-26T23:28:28Z

size-limit report 📦

⚠️ Warning: Base artifact is not the latest one, because the latest workflow run is not done yet. This may lead to incorrect results. Try to re-run all tests to get up to date results.

Path	Size	% Change	Change
@sentry/browser	25.65 kB	+0.04%	+10 B 🔺
@sentry/browser - with treeshaking flags	24.14 kB	+0.05%	+10 B 🔺
@sentry/browser (incl. Tracing)	42.15 kB	-0.01%	-4 B 🔽
@sentry/browser (incl. Tracing, Profiling)	46.76 kB	-0.01%	-3 B 🔽
@sentry/browser (incl. Tracing, Replay)	80.93 kB	-0.01%	-7 B 🔽
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags	70.56 kB	-0.01%	-4 B 🔽
@sentry/browser (incl. Tracing, Replay with Canvas)	85.64 kB	-0.01%	-5 B 🔽
@sentry/browser (incl. Tracing, Replay, Feedback)	97.91 kB	-0.01%	-7 B 🔽
@sentry/browser (incl. Feedback)	42.43 kB	+0.04%	+15 B 🔺
@sentry/browser (incl. sendFeedback)	30.32 kB	+0.06%	+16 B 🔺
@sentry/browser (incl. FeedbackAsync)	35.31 kB	+0.08%	+25 B 🔺
@sentry/browser (incl. Metrics)	26.96 kB	+0.04%	+10 B 🔺
@sentry/browser (incl. Logs)	27.11 kB	+0.04%	+10 B 🔺
@sentry/browser (incl. Metrics & Logs)	27.78 kB	+0.04%	+10 B 🔺
@sentry/react	27.41 kB	+0.03%	+8 B 🔺
@sentry/react (incl. Tracing)	44.48 kB	-0.01%	-1 B 🔽
@sentry/vue	30.08 kB	+0.03%	+7 B 🔺
@sentry/vue (incl. Tracing)	44.04 kB	-0.01%	-4 B 🔽
@sentry/svelte	25.67 kB	+0.04%	+10 B 🔺
CDN Bundle	28.33 kB	+0.07%	+17 B 🔺
CDN Bundle (incl. Tracing)	43.12 kB	+0.04%	+16 B 🔺
CDN Bundle (incl. Logs, Metrics)	29.7 kB	+0.06%	+16 B 🔺
CDN Bundle (incl. Tracing, Logs, Metrics)	44.16 kB	+0.03%	+9 B 🔺
CDN Bundle (incl. Replay, Logs, Metrics)	68.5 kB	+0.04%	+23 B 🔺
CDN Bundle (incl. Tracing, Replay)	80.01 kB	+0.02%	+9 B 🔺
CDN Bundle (incl. Tracing, Replay, Logs, Metrics)	81.05 kB	+0.02%	+9 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback)	85.55 kB	+0.01%	+6 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics)	86.58 kB	+0.01%	+7 B 🔺
CDN Bundle - uncompressed	82.72 kB	+0.08%	+58 B 🔺
CDN Bundle (incl. Tracing) - uncompressed	127.86 kB	+0.05%	+58 B 🔺
CDN Bundle (incl. Logs, Metrics) - uncompressed	86.86 kB	+0.07%	+58 B 🔺
CDN Bundle (incl. Tracing, Logs, Metrics) - uncompressed	131.27 kB	+0.05%	+58 B 🔺
CDN Bundle (incl. Replay, Logs, Metrics) - uncompressed	209.85 kB	+0.03%	+58 B 🔺
CDN Bundle (incl. Tracing, Replay) - uncompressed	244.74 kB	+0.03%	+58 B 🔺
CDN Bundle (incl. Tracing, Replay, Logs, Metrics) - uncompressed	248.14 kB	+0.03%	+58 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed	257.65 kB	+0.03%	+58 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback, Logs, Metrics) - uncompressed	261.04 kB	+0.03%	+58 B 🔺
@sentry/nextjs (client)	46.89 kB	-0.01%	-1 B 🔽
@sentry/sveltekit (client)	42.61 kB	-0.01%	-3 B 🔽
@sentry/node-core	55.77 kB	+0.04%	+17 B 🔺
@sentry/node	172.41 kB	-0.2%	-337 B 🔽
@sentry/node - without tracing	96.05 kB	+0.05%	+40 B 🔺
@sentry/aws-serverless	112.85 kB	+0.07%	+78 B 🔺

View base workflow run

github-actions · 2026-03-21T14:04:35Z

This pull request has gone three weeks without activity. In another week, I will close it.

But! If you comment or otherwise update it, I will reset the clock, and if you apply the label PR: no-auto-close I will leave it alone ... forever!

github-actions · 2026-03-28T14:08:05Z

Closing due to inactivity after stale warning. Comment or reopen when ready to continue, and use PR: no-auto-close to opt out of automatic closure.

github-actions · 2026-03-28T14:31:40Z

Semver Impact of This PR

🟡 Minor (new features)

📋 Changelog Preview

This is how your changes will appear in the changelog.
Entries from this PR are highlighted with a left border (blockquote style).

New Features ✨

Deps

Bump lodash.template from 4.5.0 to 4.18.1 by dependabot in #20085
Bump @xmldom/xmldom from 0.8.3 to 0.8.12 by dependabot in #20066

Other

(browser) Add View Hierarchy integration by timfish in #14981

(core) Support embeddings in langchain by nicohrubec in #20017
(core, node) Portable Express integration by isaacs in #19928
(deno) Add denoRuntimeMetricsIntegration by chargome in #20023
(node, bun) Enforce minimum collection interval in runtime metrics integrations by chargome in #20068

Bug Fixes 🐛

(aws-serverless) Add timeout to _endSpan forceFlush to prevent Lambda hanging by logaretm in #20064
(cloudflare) Ensure every request instruments functions by JPeer264 in #20044
(core) Set span.status to error when MCP tool returns JSON-RPC error response by betegon in #20082
(gatsby) Fix errorHandler signature to match bundler-plugin-core API by JPeer264 in #20048

Internal Changes 🔧

Core

Do not emit spans for chats.create in google-genai by nicohrubec in #19990
Unify .do* span ops to gen_ai.generate_content by nicohrubec in #20074
Simplify addResponseAttributes in openai integration by nicohrubec in #20013
Extract shared endStreamSpan for AI integrations by nicohrubec in #20021
Remove provider-specific AI span attributes in favor of gen_ai attributes in sentry conventions by nicohrubec in #20011

Deps

Bump mshick/add-pr-comment from dd126dd8c253650d181ad9538d8b4fa218fc31e8 to e7516d74559b5514092f5b096ed29a629a1237c6 by dependabot in #20078
Bump getsentry/craft/.github/workflows/changelog-preview.yml from 2.24.1 to 2.25.2 by dependabot in #20081

Other

(node) Add node integration tests for Vercel ToolLoopAgent by nicohrubec in #20087
(nuxt) Make Nuxt 5 (nightly) E2E optional by s1gr1d in #20113
Update validate-pr workflow by stephanie-anderson in #20072
Remove unused tsconfig-template folder by mydea in #20067

_{🤖 This preview updates automatically when you update the PR.}

Lms24 · 2026-03-30T10:41:25Z

@timfish anything that we still need to change here to get this out of draft?

timfish · 2026-03-30T10:59:13Z

I need to add an integration test and maybe some bike shedding on the export name.

I think "view hierarchy" isn't that descriptive of what it does and just describes our internal naming!

Lms24 · 2026-03-30T11:39:51Z

I think "View Hierarchy" already has precedence since the mobile SDKs already ship it like this (e.g. React Native) and it's what the feature is called in the Sentry UI. Do you have other ideas? I could see going with something more DOM or component-related but from my PoV, View Hierarchy is also fine.

…wser-view-hierarchy

packages/browser/src/integrations/view-hierarchy.ts

Lms24 · 2026-04-07T08:54:01Z

packages/browser/src/integrations/view-hierarchy.ts

+  return {
+    name: 'ViewHierarchy',
+    processEvent: (event, hint) => {
+      if (options.shouldAttach?.(event, hint) === false) {


m: Let's only run this event processor for error events. I checked and view hierarchy is only shown on issue detail pages. Mobile SDKs also only add view hierarchy attachments to errors.

packages/browser/src/integrations/view-hierarchy.ts

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 52ebf89. Configure here.}

packages/core/src/utils/browser.ts

timfish added 2 commits January 11, 2025 19:26

feat(browser): Add browser View Hierarchy integration

1c0b9ce

Merge branch 'develop' into timfish/feat/browser-view-hierarchy

df78783

Merge branch 'develop' into timfish/feat/browser-view-hierarchy

83c103a

mydea mentioned this pull request Mar 28, 2025

Pr 14981 #15895

Closed

2 tasks

timfish added 2 commits February 11, 2026 15:10

Merge branch 'develop' into timfish/feat/browser-view-hierarchy

013d473

Changes after rcf merge

16d9153

timfish added 2 commits February 26, 2026 23:00

Merge branch 'develop' into timfish/feat/browser-view-hierarchy

d6ad717

more

899e5c0

github-actions bot added the PR: stale label Mar 21, 2026

github-actions bot closed this Mar 28, 2026

timfish reopened this Mar 28, 2026

timfish removed the PR: stale label Mar 28, 2026

timfish added 3 commits April 5, 2026 22:50

Merge remote-tracking branch 'upstream/develop' into timfish/feat/bro…

0b0bd5e

…wser-view-hierarchy

fix linting

50629fb

Add integration test

9aa2489

timfish marked this pull request as ready for review April 5, 2026 21:29

sentry bot reviewed Apr 5, 2026

View reviewed changes

packages/browser/src/integrations/view-hierarchy.ts Show resolved Hide resolved

Skip for cdn bundles

e8a8d7b

add null check from PR review

f225a3b

This comment was marked as outdated.

Sign in to view

only run for non-cdn bundles

61243cd

timfish requested a review from Lms24 April 5, 2026 22:10

lint

56e005c

sentry bot reviewed Apr 5, 2026

View reviewed changes

packages/browser/src/integrations/view-hierarchy.ts Outdated Show resolved Hide resolved

Limit getComponentName traverse depth

e5768ca

cursor bot reviewed Apr 5, 2026

View reviewed changes

packages/browser/src/integrations/view-hierarchy.ts Show resolved Hide resolved

Lms24 reviewed Apr 7, 2026

View reviewed changes

Allow limiting traversal depth via onElement callback

a733a15

cursor bot reviewed Apr 7, 2026

View reviewed changes

packages/browser/src/integrations/view-hierarchy.ts Show resolved Hide resolved

packages/browser/src/integrations/view-hierarchy.ts Show resolved Hide resolved

timfish added 2 commits April 7, 2026 13:23

only capture for events

b065040

Merge branch 'develop' into timfish/feat/browser-view-hierarchy

52ebf89

cursor bot reviewed Apr 7, 2026

View reviewed changes

packages/core/src/utils/browser.ts Show resolved Hide resolved

Lms24 approved these changes Apr 7, 2026

View reviewed changes

Uh oh!

Conversation

timfish commented Jan 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jan 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

❌ 1 Tests Failed:

Uh oh!

AbhiPrasad commented Jan 14, 2025

Uh oh!

timfish commented Jan 14, 2025

Uh oh!

github-actions bot commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Results 📊

Uh oh!

github-actions bot commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

node-overhead report 🧳

Uh oh!

github-actions bot commented Feb 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

github-actions bot commented Mar 21, 2026

Uh oh!

github-actions bot commented Mar 28, 2026

Uh oh!

github-actions bot commented Mar 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Semver Impact of This PR

New Features ✨

Deps

Other

Bug Fixes 🐛

Internal Changes 🔧

Core

Deps

Other

Uh oh!

Lms24 commented Mar 30, 2026

Uh oh!

timfish commented Mar 30, 2026

Uh oh!

Lms24 commented Mar 30, 2026

Uh oh!

Uh oh!

This comment was marked as outdated.

Uh oh!

Uh oh!

Uh oh!

Lms24 Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cursor bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

timfish commented Jan 11, 2025 •

edited

Loading

codecov bot commented Jan 11, 2025 •

edited

Loading

github-actions bot commented Feb 11, 2026 •

edited

Loading

github-actions bot commented Feb 11, 2026 •

edited

Loading

github-actions bot commented Feb 26, 2026 •

edited

Loading

github-actions bot commented Mar 28, 2026 •

edited

Loading